<template>
	<view class="container">
		<view class="header">
			<button v-if="hasAvatarUrl==false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<image v-else class="avatar" :src="avatarUrl"></image>
			<view v-if="hasLogin==true">
				<input type="nickname" class="greeting" placeholder="请输入昵称" />
				<view class="greeting">白银</view>
				<view class="greeting">9116772</view>
			</view>
			<button v-else class="exchange-btn" @click="wxlogin">授权登录</button>
		</view>
		<!--积分-->
		<view class="fansListClass">
			<view v-for="(item,index) in fansList" class="fansItem">
				<text class="fansTextItemOne">{{item.num}}</text>
				<text class="fansTextItemTwo">{{item.name}}</text>
			</view>

		</view>
		<!--开通会员-->
		<view v-for="(item,index) in vipList" class="bottom marTop">
			<image :src="item.icon" class="vipModuleImgItem"></image>
			<view class="otherModuleText">{{item.name}}</view>
			<image src="../../../static/icon/icon_vip_reg.png" class="vipModuleRightImgItem"></image>
		</view>
		<!--达人招募-->
		<view class="twoImgClass marTop">
			<view v-for="(item,index) in twoImgList">
				<cover-image :src="item.icon"></cover-image>
			</view>

		</view>
		<!--常用功能-->
		<view>
			<text class="textNomal">常用功能</text>
		</view>
		<view class="twoModeleClass">
			<view v-for="(item,index) in twoModuleList" class="twoModeleItem">
				<image :src="item.icon" class="twoModuleIconItem" @click="jumpIntent(item.path)"></image>
				<view>
					<text class="twoModeleTextItem">{{item.name}}</text>
				</view>
			</view>

		</view>
		
		<!--底部功能-->
		<view v-for="(item,index) in otherModuleList" class="bottom marTop" @click="moduleClick(item)">
			<image :src="item.icon" class="otherModuleImgItem"></image>
			<view class="otherModuleText">{{item.name}}</view>
			<image src="../../../static/icon/icon_go.png" class="otherModuleRightImgItem"></image>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	const defaultAvatarUrl =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	export default {
		data() {
			return {
				hasAvatarUrl: false,
				avatarUrl: defaultAvatarUrl,
				userInfo: {
					name: ''
				},
				fansList: [{
					num: 1111,
					name: '积分'
				}, {
					num: 222,
					name: '账户余额'
				}, {
					num: 222,
					name: '优惠券'
				}],
				twoImgList: [{
						icon: '../../../static/icon/icon_drzm.png'
					},
					{
						icon: '../../../static/icon/icon_wdpt.png'
					}
				],
				oneModuleList: [{
					name: '我的订单'
				}, {
					name: '成为高手'
				}],
				twoModuleList: [{
					name: '我的订单',
					icon: '../../../static/icon/icon_wddd.png',
					path: ''
				}, {
					name: '评价售后',
					icon: '../../../static/icon/icon_pjsh.png',
					path: '/pages/module/my/myWallet/myWallet'
				}, {
					name: '我的客服',
					icon: '../../../static/icon/icon_wdkf.png',
					path: ''
				}, {
					name: '优惠券',
					icon: '../../../static/icon/icon_yhq.png',
					path: '',
				}, {
					name: '礼品码兑换',
					icon: '../../../static/icon/icon_lpmdh.png',
					path: '',
				}, {
					name: '服务协议',
					icon: '../../../static/icon/icon_fwxy.png',
					path: '',
				}, {
					name: '关于我们',
					icon: '../../../static/icon/icon_gywm.png',
					path: ''
				}],
				otherModuleList: [{
						name: '收藏夹',
						icon: '../../../static/icon/icon_scj.png',
				
					},
					{
						name: '会员福利',
						icon: '../../../static/icon/icon_hyfl.png'
					},
					{
						name: '投诉建议',
						icon: '../../../static/icon/icon_tsjy.png',
						path:'/pages/module/suggestions/suggestionList/suggestionList'
					},
					{
						name: '帮助中心',
						icon: '../../../static/icon/icon_bzzx.png'
					},
					{
						name: '地址管理',
						icon: '../../../static/icon/icon_dzgl.png'
					}

				],
				vipList: [{
					name: '开通会员，每单折扣价88折！',
					icon: '../../../static/icon/icon_vip_orange.png'
				}]

			}

		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			if (this.userInfo == null) {
				this.setHasLogin(false)
			}
			if (!this.hasLogin) {
				this.hasAvatarUrl = false

			}
		},
		methods: {
			...mapMutations(['setHasLogin', 'setUserInfo']),
			onChooseAvatar(e) {
				console.log(e)
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
				this.hasAvatarUrl = true
			},
			wxlogin() {
				let that = this;
				//先获取用户的信息

				uni.getUserInfo({
					desc: '登录的数据',
					success(ures) {
						console.log(ures, '返回的用户信息');
						//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
						//在成功的回调中去使用微信登录

						uni.login({
							provider: 'weixin', //使用微信登录
							success(lres) {
								console.log(lres, '请求微信登录返回的数据');
								//我们要根据上面获取的code码去作为请求参数发送给后端
								that.setHasLogin(true)
								let params = {
									code: lres.code
								};

								that.setUserInfo({
									name: '777',
									openid: 111111,
									money: "1222"
								})

								//这里需要使用自己封装的接口 loginByWechat
								// loginByWechat(params).then(res => {
								// 	console.log(res, '微信一键登录返回的数据');
								// 	/* 思路
								// 	1.返回的数据可能是成功可能是失败
								// 	2.失败的情况如果是 用户没有注册微信我们需要去执行其他操作
								// 	3.把我们拿到的用户信息携带者去注册微信页面，注册成功后后端返回成功code码
								// 	4.当code==200的时候也就是成功的时候
								// 	5.成功但是一些属性为空，用户注册了微信但是没有绑定手机号应该跳转绑定手机号页面
								// 	*/
								// 	if (res.cdoe == '后台返回的错误码') {
								// 		//当前用户没有注册 每个后端设置的错误码不同，根据接口文档
								// 		//这一步需要我们拿到用户的数据去注册 在data中声明一个对象存储用户数据
								// 		that.registerDate = {
								// 			unionId: res.data.unionId ? res.data.unionId : res
								// 				.data.openid, //开放平台ID
								// 			openId: res.data,
								// 			openid,
								// 			sessionKey: res.data.sessionKey,
								// 			signature: ures.signature, //签名
								// 			rawData: ures.rawData, //原始数据
								// 			encryptedData: ures.encryptedData, //加密数据
								// 			iv: ures.iv //偏移量
								// 		}; //这里的数据基本都是这些，只不过可能变量名不一样
								// 		that.register(); //跳转注册页面
								// 	}
								// 	//当前用户注册了
								// 	else if (red.code == '200') {
								// 		//判断注册了 有没有绑定手机号
								// 		that.mobile(res.data); //
								// 		//这个地方可以把下面的函数直接这里 我这里是方便以后修改所以当都封装一下
								// 	}
								// });
							}
						});
					}
				});
			},

			getUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log(infoRes.userInfo); // 打印用户信息
						console.log('用户昵称为: ' + infoRes.userInfo.nickName); // 打印用户昵称
						// 在这里，你可以将用户的头像和昵称保存到本地或者发送到后端进行处理
						// infoRes.userInfo.avatarUrl是用户的头像链接
						// infoRes.userInfo.nickName是用户的昵称
					}
				});

				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.record']) {
							uni.authorize({
								scope: 'scope.record',
								success() {
									// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
								}
							})
						}
					}
				})
			},
			jumpIntent(path) {
				console.log(path)
				uni.navigateTo({
					url: path
				});
			},
			moduleClick(item){
				console.log(item)
				if(item.path){
					uni.navigateTo({
						url:item.path
					})
				}
				
			}
		}
	}
</script>

<style>
	.fansListClass {
		flex-wrap: wrap;
		column-count: 3;
		text-align: center;



	}

	.fansItem {

		display: grid;
	}

	.oneModuleItem {
		width: 50%;
		text-align: center;

	}

	.twoModuleIconItem {
		width: 36px;
		height: 36px;
	}

	.otherModuleImgItem {
		width: 28px;
		height: 28px;
		flex-shrink: 0;


	}

	.bottom {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.otherModuleText {
		padding-left: 20rpx;
		color: var(---, #040B29);
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		/* 133.333% */
	}

	.exchange-btn {
		width: 400rpx;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #07c160;
		color: white;
		font-size: 40rpx;
		border-radius: 25rpx;
	}

	.btnLogin {
		background-color: #07c160;
		/* 设置按钮背景颜色 */
		color: white;
		/* 设置按钮文字颜色 */
		border: none;
		/* 去除边框 */
		padding: 10px 20px;
		/* 设置内边距 */
		border-radius: 5px;
		/* 设置按钮圆角 */
		cursor: pointer;
		/* 设置鼠标悬停时的光标形状 */
	}

	.container {
		background-color:#FFFDFC;
		padding: 20px;
		
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.greeting {
		margin-left: 20px;
		font-size: 20px;
		font-weight: bold;
	}

	.twoModeleClass {

		flex-wrap: wrap;
		column-count: 4;
		text-align: center;
		padding: 20rpx;
	}

	.textNomal {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-left: 30rpx;
	}

	.twoModeleItem {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.otherModuleRightImgItem {
		width: 28px;
		height: 28px;
		flex-shrink: 0;
		position: absolute;
		right: 60rpx;
	}

	.twoImgClass {
		flex-wrap: wrap;
		column-count: 2;
	}

	.fansTextItemOne {
		color: var(---, #040B29);
		text-align: center;
		font-family: "DIN Alternate";
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.fansTextItemTwo {
		color: var(---, #929397);
		text-align: center;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 20rpx;
	}
	.vipModuleImgItem{
		width: 14px;
		height: 12px;
		flex-shrink: 0;
	}
	.vipModuleRightImgItem{
		position: absolute;
		right: 60rpx;
		width: 84px;
		height: 32px;
		flex-shrink: 0;
	}
	.marTop{
		margin-top: 25rpx;
	}
	.twoModeleTextItem{
		color: var(---, #929397);
		text-align: center;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
</style>